<template>
  <van-dialog
    v-model="showSelect"
    show-cancel-button
    :before-close="onBeforeClose"
    @confirm="onSubmit"
  >
    <div class="staDisSelectWrap">
      <img
        style="width: 100%;height: 100%; position: absolute;z-index: -99;"
        src="../../assets/staDisaster/sxbg.png"
        alt=""
      />
      <!-- <div class="selectBot selectArea" @click="showComCity = true">
      <span>选择市：</span>
      <span class="timeColor">{{ city }}</span>
    </div> -->
      <div class="selectBot selectArea" @click="showArea = true">
        <span class="timeColor">请选择要筛选的市:</span>
        <span class="timeColor" id="timeColor">{{ city }}</span>

        <van-icon name="location-o" />
      </div>
      <div class="Time">
        <img
          style="z-index: 999;  width: 15px;height: 15px; left: 3px;   position: absolute; "
          src="../../assets/On-sitedisaster/rili.png"
          alt=""
        />
        <div class="selectBot selectTime" @click="selectTimeMet('start')">
          <span class="timeColor">{{ startTime }}</span>
        </div>
        --
        <div class="selectBot selectTime" @click="selectTimeMet('end')">
          <span class="timeColor">{{ endTime }}</span>
        </div>
      </div>
      <div class="selectDegree selectBot" id="selectDegree">
        <span>灾难等级：</span>
      </div>
      <div class="degreeRadio selectBot">
        <div class="yuJng">
          <div><van-switch v-model="colors.Blue" /> 蓝色预警</div>
          <div><van-switch v-model="colors.Yellow" />黄色预警</div>
        </div>
        <div class="yuJng">
          <div><van-switch v-model="colors.Orange" />橙色预警</div>
          <div><van-switch v-model="colors.Red" />红色预警</div>
        </div>
      </div>
      <div class="selectBot selectFator" id="selectDegree">
        <span>要素选择：</span>
      </div>
      <div class="fatorRadio">
        <!-- <van-radio-group v-model="fatorRadio">
        <van-radio v-for="item in fatorArr" :name="item" :key="item">{{
          item
        }}</van-radio>
      </van-radio-group> -->
        <div
          class="checkRadio"
          v-for="(item, index) in fatorArr"
          :name="item"
          :key="index"
        >
          <van-switch v-model="item.deched" @input="onInput" />{{ item.name }}
        </div>
      </div>

      <!--时间选择器-->
      <van-popup
        v-model="selectTime"
        get-container="body"
        position="bottom"
        :style="{ width: '100%', height: '40%' }"
      >
        <van-datetime-picker
          v-model="currentDate"
          @cancel="selectTime = false"
          @confirm="confirmTime"
          type="datetime"
          title="选择年月日"
          :max-date="maxDate"
        />
      </van-popup>

      <!--区域选择器-->

      <comCity
        v-if="showArea"
        @closeEmit="closeAreaMet"
        @confirmEmit="confirmEmitMet"
        :arr="arr"
      >
      </comCity>
    </div>
  </van-dialog>
</template>
<script type="text/javascript">
import comArea from '@/components/common/area.vue'
import comCity from '@/components/common/city.vue'
import Vue from 'vue'
import { Switch } from 'vant'
import { getItem, setItem } from '../../util/storage.js'
Vue.use(Switch)
export default {
  props: {
    initObj: {
      type: Object,
      default: () => {},
    },
    showSelect: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      index: 0,
      degreeRadio: '',
      fatorRadio: '',

      checked: false,

      colors: {
        Blue: false,
        Yellow: false,
        Orange: false,
        Red: false,
      },
      fatorArr: [
        {
          name: '台风',
          deched: false,
          code: '11B01',
        },
        {
          name: '暴雨',
          deched: false,
          code: '11B03',
        },
        {
          name: '暴雪',
          deched: false,
          code: '11B04',
        },
        {
          name: '寒潮',
          deched: false,
          code: '11B05',
        },
        {
          name: '大风',
          deched: false,
          code: '11B06',
        },
        {
          name: '沙尘暴',
          deched: false,
          code: '11B07',
        },
        {
          name: '高温',
          deched: false,
          code: '11B09',
        },
        {
          name: '干旱',
          deched: false,
          code: '11B22',
        },
        {
          name: '雷电',
          deched: false,
          code: '11B14',
        },
        {
          name: '冰雹',
          deched: false,
          code: '11B15',
        },
        {
          name: '霜冻',
          deched: false,
          code: '11B16',
        },
        {
          name: '大雾',
          deched: false,
          code: '11B17',
        },
        {
          name: '霾',
          deched: false,
          code: '11B19',
        },
        {
          name: '道路结冰',
          deched: false,
          code: '11B21',
        },
        {
          name: '雷雨大风',
          deched: false,
          code: '11B20',
        },
        {
          name: '森林火险',
          deched: false,
          code: '11B25',
        },
      ],
      selectTime: false,
      currentDate: new Date(),
      maxDate: new Date(),
      timeType: '',
      startTime: '请选择开始时间',
      endTime: '请选择结束时间',
      city: '',
      cnty: '',
      eventType: '',
      severity: '',
      showArea: false,
      showComCity: false,
      arr: [],
    }
  },
  created() {
    var location = getItem('location')
    this.city = location[1].name
    this.arr = [this.city]
    this.cnty = location[2].name || '选择区县'
    this.startTime = this.initObj.startTime
    this.endTime = this.initObj.endTime
    this.degreeRadio = this.initObj.severity
    this.fatorRadio = this.initObj.eventType
  },
  mounted() {},
  watch: {},
  components: {
    comArea,
    comCity,
  },
  methods: {
    closeAreaMet() {
      this.showArea = false
    },
    confirmEmitMet(value) {
      this.city = value
      this.arr = [this.city]
      this.showArea = false
    },
    onSubmit() {
      var alarmSeverity = []
      var alarmEventtype = []
      for (let key in this.colors) {
        if (this.colors[key] == true) {
          alarmSeverity.push(key)
        }
      }
      this.fatorArr.forEach((it) => {
        if (it.deched == true) {
          alarmEventtype.push(it.code)
        }
      })
      alarmSeverity = alarmSeverity.join(',')
      alarmEventtype = alarmEventtype.join(',')
      var params = {
        startTime: this.startTime,
        endTime: this.endTime,
        city: this.city,
        // cnty: this.cnty,
        alarmSeverity: alarmSeverity,
        alarmEventtype: alarmEventtype,
      }
      this.$emit('screening', params)
    },
    onBeforeClose() {
      this.$emit('detailBack')
    },

    onInput(checked) {},
    cancelBtnMet() {
      this.$emit('detailBack')
    },
    onClickLeft() {
      this.$emit('detailBack')
    },
    selectTimeMet(type) {
      this.timeType = type
      this.selectTime = true
    },
    confirmEmitCityMet(value) {
      this.showComCity = false
      this.city = value
      this.arr = [this.city]
      this.cnty = '选择区县'
    },
    confirmTime() {
      if (this.timeType == 'start') {
        this.startTime = this.$util.getTime(this.currentDate)
      } else if (this.timeType == 'end') {
        this.endTime = this.$util.getTime(this.currentDate)
      }
      this.selectTime = false
    },
  },
}
</script>
<style type="text/css" lang="less" scoped>
/deep/.van-switch {
  font-size: 12px !important;
  margin-right: 6px;
}
.staDisSelectWrap {
  position: relative;
  //   background: url('../../assets/staDisaster/sxbg.png');
  //   background-image: 100%, 100%;
  //   background-position: center;
  //   background-repeat: no-repeat;

  //   object-fit: cover;
  font-size: 16px;

  box-sizing: border-box;
  .Time {
    display: flex;
    padding-left: 10px;

    justify-content: space-evenly;
  }
  .selectBot {
    margin-bottom: 20px;
    .yuJng {
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #656b75;
      margin-bottom: 15px;
      display: flex;
      justify-content: space-evenly;
    }
  }
  #selectDegree {
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #101010;
    padding-top: 10px;
    padding-left: 10px;
  }

  .selectArea {
    padding-left: 10px;
    padding-top: 10px;
  }
  .fatorRadio {
    display: flex;

    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    .checkRadio {
      width: 90px;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #656b75;
      margin-bottom: 15px;
    }
  }
  .btnArea {
    margin-top: 20px;
    .van-button {
      width: 40%;
      margin-right: 10px;
    }
  }
  /deep/ .van-icon {
    font-size: 15px;
  }
  .timeColor {
    font-size: 13px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #101010;
    margin-right: 4px;
  }
  #timeColor {
    font-size: 14px;
  }
}
</style>
